<template>
  <el-card>
      <div id="main" style="width: 750px;height:400px;"></div>
    </el-card>
</template>

<script>
import * as echarts from "echarts"
import 'echarts-gl'
export default {
  data() {
    return {};
  },
  created() {},
  // 此时，页面上的元素，已经被渲染完毕了！所以要将初始化放到这里 而不是created里
  async mounted() {
    // 3. 基于准备好的dom，初始化echarts实例
    var ROOT_PATH ="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      backgroundColor: "#000",
      globe: {
        baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
        heightTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
        displacementScale: 0.04,
        shading: "realistic",
        environment: ROOT_PATH + "/data-gl/asset/starfield.jpg",
        realisticMaterial: {
          roughness: 0.9,
        },
        postEffect: {
          enable: true,
        },
        light: {
          main: {
            intensity: 5,
            shadow: true,
          },
          ambientCubemap: {
            texture: ROOT_PATH + "/data-gl/asset/pisa.hdr",
            diffuseIntensity: 0.2,
          },
        },
      },
    }
    option && myChart.setOption(option)
  },
}
</script>

<style lang="less" scoped>
</style>
